Supported Logic

[!IMPORTANT] Link of the supported Logic in-app: [Onboarding logic](../../../../../Mobile/Mobile Home/Internal Users Documentation/Remote Config Reference/Onboarding Config/Onboarding logic)

In the onboarding JSON structure, we have the option to add an array of logic to handle the logic for some of the onboarding steps but not all the logic in-app is supported in Web.

Jump

jump works similarly to how it works in the app. It handles jumping forward in the onboarding based on some condition

Key	Notes
`stepId`	The id of the step that should check the jump condition.
`actions`	An array of all the actions types.
`type`	`jump`
`condition`	The condition needed for the step to jump. If that condition evaluates to `false`, `jump` will be ignored and move forwarded to the next step in the onboarding instead.
`to`	The `stepId` of the step that the user should go to when the `condition` evaluates to `true`

"logic": [
  {
      "stepId": "sex_choice",
      "actions": [
         {
            "type": "jump",
            "to": "coping_mechanism",
            "condition": "user.getOnboardingAnswerValue('sex_choice') != 'female'"
          }
      ]
  }
]

[!IMPORTANT] In this example, once the user reaches the step with the sex_choice id, the jump logic will check the condition so that if the user’s answer’s value is yes, it’ll jump to the step with the id coping_mechanism.

{
    "type": "goalChoice",
    "title": "What's your gender?",
    "subtitle": "We'd like to personalize your experience as much as possible",
    "backgroundImage": "https://c.thefab.co/web-onboarding/time/img_gc_04.webp",
    "stepId": "sex_choice",
    "key": "sex_choice",
    "backgroundColor": "#8AD2C8",
    "hideIcons": true,
    "textColor": "#fff",
    "trackAsNewUserProperty": true,
    "userPropertyKey":"gender",
    "desktopBackground": "https://c.thefab.co/web-onboarding/time/web-onboarding-time-green-1.jpeg",
    "choices": [
        {
            "name": "Male",
            "locked": false,
            "value": "male",
            "nameColor": "#006055",
            "backgroundColor": "#FFFFFF",
            "hideDarkOverlay": true,
            "hoverBackgroundColor": "rgba(255, 255, 255, 0.7)"
        },
        {
            "name": "Female",
            "locked": false,
            "value": "female",
            "nameColor": "#006055",
            "backgroundColor": "#FFFFFF",
            "hideDarkOverlay": true,
            "hoverBackgroundColor": "rgba(255, 255, 255, 0.7)"
        },
        {
            "name": "Prefer not to say",
            "locked": false,
            "value": "prefer_not",
            "nameColor": "#006055",
            "backgroundColor": "#FFFFFF",
            "hideDarkOverlay": true,
            "hoverBackgroundColor": "rgba(255, 255, 255, 0.7)"
        }
    ]
}

Supported Conditions Functions

The condition in the logic actions accepts code that evaluates to true or false but only a couple of functions are currently supported in Web. These functions are:

Function	Notes	Examples
user.getOnboardingAnswerValue	A function that checks for the user’s answer in the onboarding steps and compares to whether it equals (==), not equal (!=), greater than (>), etc.	`"user.getOnboardingAnswerValue('sex_choice') != 'female'"` `"user.getOnboardingAnswerValue('age_choice') >= 30"` Where `sex_choice` & `age_choice` are the step ids in the onboarding. `"user.getOnboardingAnswerValue('swiping_cards', 0) != 'female'"` `"user.getOnboardingAnswerValue('swiping_cards', 3) >= 30"` If the answers are saved as an Array you can select the specific `index` by adding it as an argument.
url.param	A function that searches in the URL for some parameters.	`"url.param('feature') == 'nudge_to_web'"` This evaluates to `true` only if a `feature` exists in the URL and that `feature` is `nudge_to_web`. URL example: `https://start.thefabulous.co/onboarding/fabulous-initial?feature=nudge_to_web`
`getStringFromStorage`	Takes two arguments: `cookieName`: string; `fallbackValue`: string;	`"planCode": "getStringFromStorage('first_choice_plan_code', 'fab-subs-quarterly-discount-intro-1-nineteen')",` `planCode` is dynamic based on [Set Cookies Experiment](../Set Cookies Experiment). The code will first check if we have the `planCode` saved, if not, it’ll fall back to the plan code: `fab-subs-quarterly-discount-intro-1-nineteen`
`getBooleanFromStorage`	Takes two arguments: `cookieName`: string; `fallbackValue`: boolean;	Same as `getStringFromStorage` except that the value returned should be a boolean: `"useHTML": "getBooleanFromStorage('use_html', true)",` Note: Please ensure the `fallbackValue` is a boolean (it must be without quotes)
`getNumberFromStorage`	Takes two arguments: `cookieName`: string; `fallbackValue`: number;	Same as `getStringFromStorage` except that the value returned should be a number: `"getNumberFromStorage('goal_choice_sleep_hours', 7)"`
`getArrayFromStorage`	Takes two arguments: `cookieName`: string; `fallbackValue`: array;	You can use this function to get an array from the cookies: `"paymentOrder": "getArrayFromStorage('payment_order', ['cc','google-pay','paypal', 'apple-pay'])"` In this example, the code will check for `payment_order` in the cookies; it’ll use it if it exists, otherwise it’ll fall back to the fallback value.
`getObjectFromStorage`	Takes two arguments: `cookieName`: string; `fallbackValue`: object;	Used to get an object from the cookies.
> [!NOTE] If you face any validation issue when using `getBooleanFromStorage` `getNumberFromStorage`, or `getArrayFromStorage`, please ask the backend team to update the validation for the needed key to accept string values.

Back - (WEB-only)

back isn’t currently supported in app but in web, it works similarly to how jump works except that moves backward in the onboarding.

Key	Notes
`stepId`	The id of the step that should check the back action.
`actions`	An array of all the actions types.
`type`	`back`
`to`	The `stepId` of the step that the user should go back to.

"logic": [
  {
      "stepId": "interstitialImage_2",
      "actions": [
          {
              "type": "back",
              "to": "goal_choice_radio"
          }
      ]
  }
]

In this example, once the user reaches the step interstitialImage_2, they can go back to goal_choice_radio.

[!NOTE]

This back logic is only supported in the steps that support the back button in the onboarding (You can find [Onboarding Templates](Onboarding Templates)).

It doesn't need a condition to evaluate to but it’s needed to avoid moving back the steps that the user jumped to (if needed).

Progress

This logic saves the user’s progress in the onboarding.

Key	Notes
`stepId`	The step id that should check the `progress` logic.
`actions`	An array of all the actions types.
`type`	`progress`
`to`	The step id that should be saved.

"logic": [
    {
        "stepId": "chapter_5_video",
        "actions": [
            {
                "type": "progress",
                "to": "chapter_5_video"
            }
        ]
    }
]

Once the user reaches chapter_5_video, the step will be saved as progress and if they go to the onboarding again, the onboarding should start at that step.

Script

script is the logic responsible for running some Javascript. Currently, only the trackEvent script is supported in web.

Key	Notes
`stepId`	The step id that should run the `script` logic.
`actions`	An array of all the actions types.
`type`	`script`
`script`	The script to run

"logic": [
    {
        "stepId": "chapter_5_video",
        "actions": [
            {
                "type": "script",
                "script": "trackEvent('Onboarding Recap Scene Viewed')"
            }
        ]
    }
]

On the step chapter_5_video, the event Onboarding Recap Scene Viewed will be tracked to Amplitude.

getDefaultValue

getDefaultValue() is a new function added to the script logic to get the default value of a template. It is currently only supported to show the value of [Range Slider Results](Onboarding Templates/Range Slider Results)

An example of how to use that function in the logic:

"logic": [
    {
      "stepId": "range_slider_results",
      "actions": [
        {
          "type": "script",
          "script": "getDefaultValue(\"(user.getOnboardingAnswer('q1_slider') + user.getOnboardingAnswer('q2_slider'))/2-9\")"
        }
      ]
    }
  ]

Jump​

Supported Conditions Functions​

Back - (WEB-only)​

Progress​

Script​

getDefaultValue​